<template>
	<view>
		<my-topbar :textColor="textColor" :bgColor="bgColor" :topbarList="topbarList" :activeIndex="activeIndex"
			@changeActiveIndex="changeActive" :topbarViewWidth="topbarViewWidth" :bottomViewWidth="bottomViewWidth"
			:topbarWidth="topbarWidth">
		</my-topbar>
	</view>
</template>

<script>
	//导入公共组件
	import myTopbar from '@/components/common/my-topbar-animation/my-topbar-animation.vue'

	export default {
		props: ['activeIndex'],
		components: {
			myTopbar
		},
		data() {
			return {
				bgColor: '#F5F5F5',
				topbarViewWidth: '160rpx',
				bottomViewWidth: '80rpx',
				topbarWidth: '480rpx',
				textColor: 'red',
				topbarList: [{
						id: 1,
						text: '拼手气',
						type: '2'
					}, {
						id: 2,
						text: '普通',
						type: '1'
					},
					{
						id: 3,
						text: '专属',
						type: '3'
					}
				],


			}
		},
		methods: {
			changeActive(id, item) {
				this.$emit('changeActive', id, item)
			}
		}
	}
</script>

<style>
</style>